<template>
	<view v-if="loading || error" class="loading_view">
		<u-loading mode="circle" v-if="loading" size="50"></u-loading>
		<u-toast ref="uToast" />
		<view v-if="error"><image class="icon" src="../../static/image/empty-image-error.png"></image> </view>
		<view class="messgae">{{ loading?'加载中...':'加载失败' }}</view>
	</view>
	<view v-else style="background-color: #EFEFEF;height: 100vh;overflow: auto;">
		<u-toast ref="uToast" />
		<view class="item_box">
			
			<view class="item_view" @click="height_show=true">
				<view class="cen">
					<view class="left_item">身高</view>
					
					<view class="right_item">{{ height_name!=''?height_name:'不限' }}</view>
				</view>
				
				<u-select v-model="height_show" @confirm="height_confirm" mode="mutil-column"  :list="height_list"></u-select>
				
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view" @click="age_show=true">
				<view class="cen">
					<view class="left_item">年龄</view>
					
					<view class="right_item">{{ age_name!=''?age_name:'不限' }}</view>
				</view>
				
				<u-select v-model="age_show" @confirm="age_confirm" mode="mutil-column"  :list="age_list"></u-select>
				
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view" @click="salary_show=true">
				<view class="cen">
					<view class="left_item">月薪</view>
					
					<view class="right_item">{{ salary_name!=''?salary_name:'不限' }}</view>
				</view>
				<u-select v-model="salary_show" @confirm="salary_confirm" :list="salary_list"></u-select>
				<i class="exit_icon"></i>
			</view>
		
		</view>
		
		<view class="item_box">
			
			<view class="item_view" @click="area_show=true">
				<view class="cen">
					<view class="left_item">现居</view>
					
					<view class="right_item">{{ area_name!=''?area_name:'不限' }}</view>
				</view>
				<u-select v-model="area_show" @confirm="area_confirm"  mode="mutil-column-auto" :list="area_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view" @click="star_show = true">
				<view class="cen">
					<view class="left_item">星座</view>
					
					<view class="right_item">{{ star_name!=''?star_name:'不限' }}</view>
				</view>
				<u-select v-model="star_show" @confirm="star_confirm" :list="star_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view" @click="education_show=true">
				<view class="cen">
					<view class="left_item">学历</view>
					
					<view class="right_item">{{ education_name!=''?education_name:'不限' }}</view>
				</view>
				<u-select v-model="education_show" @confirm="education_confirm" :list="education_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view" @click="marriage_show=true">
				<view class="cen">
					<view class="left_item">婚烟状况</view>
					
					<view class="right_item">{{ marriage_name!=''?marriage_name:'不限' }}</view>
				</view>
				
				<u-select v-model="marriage_show" @confirm="marriage_confirm" :list="marriage_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view" @click="blood_show=true">
				<view class="cen">
					<view class="left_item">血型</view>
					
					<view class="right_item">{{ blood_name!=''?blood_name:'不限' }}</view>
				</view>
				
				<u-select v-model="blood_show" @confirm="blood_confirm" :list="blood_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			
			<view class="item_view" @click="nativePlace_show=true">
				<view class="cen">
					<view class="left_item">籍贯</view>
					
					<view class="right_item">{{ nativePlace_name==''?'不限':nativePlace_name }}</view>
				</view>
				<u-select v-model="nativePlace_show" mode="mutil-column-auto" @confirm="nativePlace_confirm" :list="nativePlace_list"></u-select>
				<i class="exit_icon"></i>
			</view>
			<!-- occupation_show -->
			<view class="item_view" @click="occupation_show=true">
				<view class="cen">
					<view class="left_item">职业</view>
					
					<view class="right_item">{{ occupation_name!=''?occupation_name:'不限' }}</view>
				</view>
				
				<u-select v-model="occupation_show" @confirm="occupation_confirm" :list="occupation_list"></u-select>
				<i class="exit_icon"></i>
			</view>
		
		</view>
		
		<view class="butt_view"><u-button @click="submit" type="error">完成</u-button></view>
		
	</view>
</template>
<script>
	import area from '../../static/js/area.js'
	export default {
		data() {
			return {
				formData:{
					height:'',
					age:'',
					salary:'',
					city:'',
					star:'',
					education:'',
					marriage:'',
					blood:'',
					nativePlace:'',
					occupation:''
				},
				height_show:false,
				height_list: [],
				height_name:'',
				age_show:false,
				age_list: [],
				age_name:'',
				salary_show: false,
				salary_list:[
					{
						value: '0-2',
						label: '2千以下'
					},
					{
						value: '2-5',
						label: '2千-5千'
					},
					{
						value: '5-10',
						label: '5千-1万'
					},
					{
						value: '10-20',
						label: '1万-2万'
					},
					{
						value: '20-50',
						label: '2万-5万'
					},
					{
						value: '50-100',
						label: '5万-10万'
					},
					{
						value: '100-200',
						label: '10万以上'
					}
				],
				salary_name:'',
				area_show:false,
				area_list:area,
				area_name:'',
				education_show:false,
				education_name:'',
				education_list:[
					{
						value:'0',
						label:'不限'
					},
					{
						value: '1',
						label: '高中'
					},
					{
						value: '2',
						label: '中专'
					},
					{
						value: '3',
						label: '大专'
					},
					{
						value: '4',
						label: '本科'
					},
					{
						value: '5',
						label: '硕士'
					},
					{
						value: '6',
						label: '博士'
					},
					{
						value: '7',
						label: '院士'
					}
					
				],
				marriage_list:[
					{value:1,label:'未婚'},
					{value:2,label:'已婚'},
					{value:3,label:'重婚'}
				],
				marriage_show:false,
				marriage_name:'',
				blood_list:[
					{value:1,label:'A型'},
					{value:2,label:'B型'},
					{value:3,label:'O型'},
					{value:4,label:'Rh型'}
				],
				blood_show:false,
				blood_name:'',
				occupation_show:false,
				occupation_list:[
					{
						value: '0',
						label: '不限'
					},
					{
						value: '1',
						label: '在校学生'
					},
					{
						value: '2',
						label: '计算机/IT'
					},
					{
						value: '3',
						label: '电子/仪器'
					},
					{
						value: '4',
						label: '通信技术'
					},
					{
						value: '5',
						label: '销售'
					},
					{
						value: '6',
						label: '市场拓展'
					},
					{
						value: '7',
						label: '公安/商务'
					},
					{
						value: '8',
						label: '采购/贸易'
					}
				],
				occupation_name:'',
				star_list:[],
				star_name:'',
				star_show: false,
				nativePlace_show:false,
				nativePlace_list:area,
				nativePlace_name: '',
				sub_status:false,
				loading: false,
				error:false
			}
		},
		methods: {
			getData(){
				this.loading = true
					
				let that = this
				
				this.$request({
					url:'/user/select_info',
					method:'post',
					success(res){
						if(res.statusCode==200){
							
							if(res.data.code==1){
								that.formData = res.data.data
								
								let data=[]
								
								if(that.formData.height){
									data=that.formData.height.split('-')
									
									let height_name = ''
									
									if(data[0]==0 || data[1]==0){
										
										if(data[0]==0){
											height_name='不限'
										}else{
											height_name=data[0]+'cm-不限'
										}
										
										
									}else{
											
										if(data[0]>data[1]){
											height_name=data[1]+'cm-'+data[0]+'cm'
											
										}else{
											height_name=data[0]+'cm-'+data[1]+'cm'
											
										}
										
										
									}
									
									that.height_name = height_name
								}
								
								if(that.formData.age){
									data=that.formData.age.split('-')
									
									let age_name = ''
									
									if(data[0]==0 || data[1]==0){
										
										if(data[0]==0){
											age_name='不限'
										}else{
											age_name=data[0]+'岁-不限'
										}
										
										
									}else{
											
										if(data[0]>data[1]){
											age_name=data[1]+'岁-'+data[0]+'岁'
											
										}else{
											age_name=data[0]+'岁-'+data[1]+'岁'
											
										}
										
										
									}
									
									that.age_name = age_name
								}
								
								for(var i in that.salary_list){
									let row = that.salary_list[i]
									
									if(row.value==that.formData.salary){
										that.salary_name = row.label
										
										break
									}
								}
								
								that.area_name = that.formData.city
								
								for(var i in that.star_list){
									let row = that.star_list[i]
									
									if(row.value==that.formData.star){
										that.star_name = row.label
										
										break
									}
								}
								
								for(var i in that.education_list){
									let row = that.education_list[i]
									
									if(row.value==that.formData.education){
										that.education_name = row.label
										
										break
									}
								}
								for(var i in that.marriage_list){
									let row = that.marriage_list[i]
									
									if(row.value==that.formData.marriage){
										that.marriage_name = row.label
										
										break
									}
								}
								
								for(var i in that.blood_list){
									let row = that.blood_list[i]
									
									if(row.value==that.formData.blood){
										that.blood_name = row.label
										
										break
									}
								}
								
								that.nativePlace_name = that.formData.nativePlace
								
								for(var i in that.occupation_list){
									let row = that.occupation_list[i]
									
									if(row.value==that.formData.occupation){
										that.occupation_name = row.label
										
										break
									}
								}
								
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
								
								that.error = true
							}
							
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
							
							that.error = true
						}
					},
					fail(err){
						that.$refs.uToast.show({
							title: '加载失败',
							type: 'warning'
						})
						
						that.error = true
					},
					complete(){
						that.loading = false
					}
				})
				
			},
			submit(){
				if(this.sub_status){
					return false
				}
				this.sub_status = true
				
				let that = this
				this.$request({
					url:'/user/select_info_save',
					data:that.formData,
					method:'post',
					success(res){
						if(res.statusCode==200){
							if(res.data.code==1){
								that.$refs.uToast.show({
									title: '保存成功',
									type: 'success'
								})
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
						}
					},
					fail(err){
						
					},
					complete(){
						that.sub_status = false
					}
				})
			},
			height_confirm(data){
				// 选择身高回调
				let height_name = ''
				
				let val=''
				
				if(data[0].value==0 || data[1].value==0){
					
					if(data[0].value!=0){
						height_name=data[0].label+'-不限'
						
						val=data[0].value+'-0'
					}else{
						height_name='不限'
						
						val='0-0'
					}
					
				}else{
						
					if(data[0].value>data[1].value){
						height_name=data[1].label+'-'+data[0].label
						
						val=data[1].value+'-'+data[0].value
					}else{
						height_name=data[0].label+'-'+data[1].label
						
						val=data[0].value+'-'+data[1].value
					}
					
				}
				
				this.height_name = height_name
				
				this.formData.height = val
			},
			age_confirm(data){
				// 选择年龄回调
				let age_name=''
				
				let val = ''
				if(data[0].value==0 || data[1].value==0){
					
					if(data[0].value!=0){
						age_name=data[0].label+'-不限'
						
						val=data[0].value+'-0'
					}else{
						age_name='不限'
						
						val='0-0'
					}
					
				}else{
						
					if(data[0].value>data[1].value){
						age_name=data[1].label+'-'+data[0].label
						
						val=data[1].value+'-'+data[0].value
					}else{
						age_name=data[0].label+'-'+data[1].label
						
						val=data[0].value+'-'+data[1].value
					}
					
				}
				
				this.age_name = age_name
				
				this.formData.age = val
			},
			salary_confirm(data){
				// 选择月薪回调
				this.salary_name = data[0].label
				
				this.formData.salary = data[0].value
			},
			area_confirm(data){
				// 选择地址回调
				this.area_name = data[0].label+","+data[1].label+","+data[2].label
				
				this.formData.city = data[0].label+","+data[1].label+","+data[2].label
			},
			star_confirm(data){
				// 选择星座回调
				this.star_name = data[0].label
				
				this.formData.star = data[0].value
			},
			education_confirm(data){
				// 选择学历回调
				this.education_name = data[0].label
				
				this.formData.education = data[0].value
			},
			marriage_confirm(data){
				// 选择婚烟回调
				this.marriage_name = data[0].label
				
				this.formData.marriage = data[0].value
			},
			blood_confirm(data){
				// 选择血型回调
				this.blood_name = data[0].label
				
				this.formData.blood = data[0].value
			},
			nativePlace_confirm(data){
				// 选择籍贯回调
				this.nativePlace_name = data[0].label+","+data[1].label+","+data[2].label
				
				this.formData.nativePlace = data[0].label+","+data[1].label+","+data[2].label
			},
			occupation_confirm(data){
				// 选择职业回调
				this.occupation_name = data[0].label
				
				this.formData.occupation = data[0].value
			}
			
		},
		onLoad(){
			let height_list=[]
			
			for(var i=0;i<=1;i++){
				
				let arr=[{value:0,label:'不限'}]
				
				let start=140+i
				
				for(var j=start;j<=210;j++){
					
					arr.push({value:""+j+"",label:j+'cm'})
					
				}
				
				height_list.push(arr)
				
			}
			
			let age_list = []
			
			for(var i=0;i<=1;i++){
				
				let arr=[{value:0,label:'不限'}]
				
				let start=18+i
				
				for(var j=start;j<=60;j++){
					
					arr.push({value:""+j+"",label:j+'岁'})
					
				}
				
				age_list.push(arr)
				
			}
			
			this.height_list = height_list
			
			this.age_list = age_list
			
			
			this.star_list=[
				{value:0,label:'不限'},
				{value:'3.21-4.19',label:'白羊座'},
				{value:'4.20-5.20',label:'金牛座'},
				{value:'5.21-6.21',label:'双子座'},
				{value:'6.22-7.22',label:'巨蟹座'},
				{value:'7.23-8.22',label:'狮子座'},
				{value:'8.23-9.22',label:'处女座'},
				{value:'9.23-10.23',label:'天秤座'},
				{value:'10.24-11.22',label:'天蝎座'},
				{value:'11.23-12.21',label:'射手座'},
				{value:'12.22-1.19',label:'摩羯座'},
				{value:'1.20-2.18',label:'水瓶座'},
				{value:'2.19-3.20',label:'双鱼座'},
			]
			
			this.getData()
			
		}
	}
</script>

<style scoped>
	.butt_view{
		width: 710rpx;
		padding-left: 40rpx;
		margin-top: 20rpx;
	}
	.item_box{
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		font-size: 32rpx;
	}
	.item_box:last-child{
		margin-bottom: 30rpx;
	}
	.item_box .item_view{
		width:750rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		position: relative;
	}
	.item_box .item_view .cen{
		width: 640rpx;
		height: 100rpx;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item_box .item_view .cen .right_item{
		color: #888888;
	}
	.exit_icon{
		padding:10rpx;
		background: url('') no-repeat;
		background-size: 20rpx;
		position: absolute;
		top:35rpx;
		right: 15rpx;
	}
</style>
